<template>
  <div class="login-container">
    <div class="login-inner">
      <div class="login-form flex1">
        <div class="title">手机登录</div>
        <a-form ref="form" @submit.prevent="login" :model="formData">
          <a-form-item>
            <div class="form-item" :class="{ active: focus === 'phone' }">
              <img src="./images/phone_icon.png" class="icon" />
              <input
                @change="changePhone"
                @focus="focus = 'phone'"
                @blur="focus = ''"
                @keyup.enter="login"
                maxlength="11"
                v-model="formData.phone"
                :rules="[
                  {
                    pattern: /^1\d{10}$/,
                    required: true,
                    message: '请输入正确的手机号',
                  },
                ]"
                type="phone"
                placeholder="手机号"
              />
            </div>
          </a-form-item>
          <a-form-item>
            <div class="form-item" :class="{ active: focus === 'code' }">
              <img src="./images/code_icon.png" class="icon" />
              <input
                @focus="focus = 'code'"
                @blur="focus = ''"
                @keyup.enter="login"
                v-model="formData.code"
                :rules="[
                  {
                    pattern: /^\d{3,6}$/,
                    required: true,
                    message: '请输入正确的验证码',
                  },
                ]"
                type="code"
                placeholder="输入验证码"
              />
              <code-span class="code" :phone="formData.phone" />
            </div>
          </a-form-item>
          <img @click="login" src="./images/login_btn.png" class="btn" />
        </a-form>
      </div>
      <img class="logo" src="./images/logo.png" />
    </div>
    <div class="copyright">
      Copyright © 2007-2020 www.lichenglove.com All Rights Reserved
    </div>
  </div>
</template>

<script>
import { reactive, ref, computed } from "@vue/reactivity";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";

import codeSpan from "./components/code-span/index.vue";

const isDev = process.env.NODE_ENV === "development";

export default {
  components: {
    codeSpan,
  },
  setup() {
    const formData = reactive({
      phone: isDev ? "15206213524" : "",
      code: isDev ? "3524" : "",
    });
    const focus = ref("");
    const store = useStore();
    const router = useRouter();
    const form = ref(null);
    const user = computed(() => {
      return store.state.user;
    });

    const login = async () => {
      const valid = await form.value.validate();
      if (!valid) return;
      const { phone = "", code = "" } = formData;
      if (!/^1\d{10}$/g.test(phone)) {
        return message.error("请正确输入手机号");
      }
      if (!code) {
        return message.error("请输入验证码");
      }
      await store.dispatch("login", formData);
      router.replace({ name: "index" });
    };
    return {
      form,
      formData,
      focus,
      user,
      login,
    };
  },
};
</script>

<style lang="less" scoped>
.login-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1a1c1c;
  background-position: center center;
  background-image: url("./images/bg.png");
  background-size: cover;
  :deep(.ant-form-item) {
    margin: 0 0 20px;
  }
}
.login-container :deep(.ant-form-explain) {
  position: absolute;
}
.login-inner {
  display: flex;
  align-items: center;
  width: 730px;
  height: 400px;
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
}
.title {
  font-size: 24px;
  padding-bottom: 40px;
  line-height: 1;
}
.logo {
  height: 100%;
  width: 290px;
}
.login-form {
  padding: 0 60px;
  display: flex;
  flex-direction: column;
}
.form-item {
  width: 320px;
  height: 44px;
  background: rgba(248, 248, 250, 1);
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(248, 248, 250, 1);
  &.active {
    box-shadow: 0px 1px 5px 0px rgba(173, 5, 58, 0.3);
    border: 1px solid rgba(254, 36, 108, 1);
    background-color: #fff;
  }
  input {
    flex: 1;
    background-color: transparent;
    border: none;
    outline: none;
    padding-left: 10px;
    height: 100%;
  }
}
.btn {
  margin-top: 20px;
  width: 320px;
  height: 50px;
  &:active {
    opacity: 0.8;
  }
}
.copyright {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  font-size: 14px;
  opacity: 0.6;
  margin: auto;
  text-align: center;
  color: white;
}
</style>
